<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增技能</title>
</head>
<body>
    <form action="/skill" method="post">
        <div>  技能名称： <input type="text" name="skillName"> </div>
        <div>  技能类型： <input type="text" name="type"> </div>
        <div>  技能描述： <input type="text" name="description"> </div>
        <div>  冷却： <input type="text" name="cooldown"> </div>
        <div>  消耗： <input type="text" name="cost"> </div>
        <div>  所属英雄：
            <select name="hero">

            </select>
        </div>
        <div><input type="button" onclick="add()" value="保存"> </div>
    </form>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <script>
        // 文档就绪函数
        $(function (){
            // 发起请求查询英雄列表
            axios.get("/hero/getJsonAll")
                .then((res)=>{
                    if(res.data.code === 200) {
                        let data = res.data.data;
                        if(data && data.length > 0) {
                            // 绑定下拉框数据
                            for (let i = 0; i < data.length; i++) {
                                $('[name="hero"]').append(`
                                    <option value="${data[i].hid}">${data[i].hname}</option>
                                `)
                            }
                        } else {
                            $('[name="hero"]').append('<option value="">暂无英雄数据</option>');
                        }
                    } else {
                        throw new Error(res.data.msg || '获取英雄列表失败');
                    }
                }).catch(error => {
                    console.error('获取英雄列表失败:', error);
                    alert('获取英雄列表失败，请稍后重试');
                    $('[name="hero"]').append('<option value="">加载失败</option>');
                });
        })


        function add(){
            // 封装对象
            let skill = {
                skillName:$("input[name=skillName]").val(),
                type:$("input[name=type]").val(),
                description:$("input[name=description]").val(),
                cooldown:$("input[name=cooldown]").val(),
                cost:$("input[name=cost]").val(),
                heroInfo:{
                    hid:$('[name="hero"]').val()
                }
            }
            // 数据有效性验证
            // 。。。。。
            // 发起异步新增请求
            axios.post('/skill',skill).then((res)=>{
                console.log(res.data);
                let data = res.data;
                // 判断是否新增成功
                if(data.code == 200){  // code == 200:true   code === 200: fales
                    alert("新增成功");
                    // 跳转页面
                    window.location.href = "skill.html"
                }else {
                    alert("新增失败");
                }
            })
        }
    </script>
</body>
</html>